<!--
 * @Date: 2025-07-19 01:21:23
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
<<<<<<< HEAD
 * @LastEditTime: 2025-10-16 23:05:55
=======
 * @LastEditTime: 2025-10-21 23:45:41
>>>>>>> 4283842 (合并部分代码)
 * @FilePath: /admin-vue/src/layouts/admin.vue
-->
<script setup lang="ts">
import GlobalMenu from './modules/global-menu/index.vue'
import GlobalLogo from './modules/global-logo/index.vue'
import GlobalHeader from './modules/global-header/index.vue'
import GlobalBreadcrumb from './modules/global-breadcrumb/index.vue'
import { MedalOne } from '@icon-park/vue-next'

const appStore = useAppStore()
const themeStore = useThemeStore()

const routeStore = useRouteStore()
const collapsed = ref(false)
</script>

<template>
  <n-layout vertical class="h-full">
    <n-layout-header
      bordered
      :style="{ height: themeStore.header.height + 'px', 'z-index': 10 }"
      class="flex items-center justify-between"
    >
      <div
        class="flex justify-center items-center"
        :style="{
          width: (collapsed ? themeStore.sider.collapsedWidth : themeStore.sider.width) + 'px',
        }"
      >
        <GlobalLogo :show-title="!collapsed" />
      </div>

      <div class="flex items-center justify-between flex-1">
        <GlobalBreadcrumb />
        <GlobalHeader />
      </div>
    </n-layout-header>

    <n-layout has-sider position="absolute" :style="{ top: themeStore.header.height + 'px' }">
      <n-layout-sider
        bordered
        :inverted="themeStore.sider.inverted"
        :collapsed="collapsed"
        :width="themeStore.sider.width"
        :collapsed-width="themeStore.sider.collapsedWidth"
        @collapse="collapsed = true"
        @expand="collapsed = false"
        show-trigger
        :native-scrollbar="false"
        collapse-mode="width"
      >
        <GlobalMenu
          :inverted="themeStore.sider.inverted"
          :collapsed="collapsed"
          :collapsed-width="themeStore.sider.collapsedWidth"
        />
      </n-layout-sider>

      <!-- 页面内容区域 -->
      <n-layout-content embedded>
        <RouterView v-slot="{ Component, route }">
          <component :is="Component" class="flex flex-grow p-3" />
        </RouterView>
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<style scoped></style>
